<style>
    .ui-grid-cell {
        height: auto!important;
    }

    .ui-grid-header {
        height: 39px!important;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .ui-grid-header-cell-label {
        height: 39px!important;
        white-space: normal;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
    }

    .workExcelTables{
        width:90%;
        margin: 0 auto
    }

    .workExcelTable{
        width:29%;
        margin-left: 19px;
        margin-right: 19px
    }

    .workExcelTa{
        margin-top:10px;
        border:1px solid #ccc
    }
    .workExcelTable .table>tbody>tr>th{
        line-height: 1.6;
        vertical-align:middle;
        text-align: center
    } 
    .workExcelTable .table>tbody>tr>th button{
        margin:0 auto
    }
    .workExcelTable .table>tbody>tr{
        border-bottom: 1px solid #ccc
    }
    .workExcelTable .table>tbody>tr>td{
        vertical-align:middle
    }
    .workExcelTable table{
        border-collapse:initial;
        height:200px
    }
    .tableHeader{
        width:200px; 
        border:1px solid #ddd
    }

    .table-bordered>tbody>tr>td{
        border-color:#ddd
    }

    .blankHeight{
        height:30px;
    }

    .btn-addon i{
        width:60%;
        margin-right:6px
    }

</style>
<div class="bg-light lter b-b wrapper-sm">
    <h1 class="m-n font-thin h4">工作报表导出</h1>
</div>
<div class="wrapper-sm" ng-controller="WorkExcelExportController">
    <div class="panel panel-default">
        <div class="panel-heading font-bold">查询</div>
        <div class="panel-body">

            <label class="control-label pull-left m-t-xs w-xs">报表名称</label>

            <div class="col-md-2 form-group">
                <input type="text" class="form-control input-sm" id="fa-searchz" ng-model="excelName" placeholder="输入报表名称搜索" name="contractNum">
            </div>


            <label class="control-label pull-left w-xs"></label>
            <div class="col-md-2 col-xs-12"></div>
            <label class="control-label pull-left w-xs"></label>
            <div class="col-md-2 col-xs-12"></div>
            <label class="control-label pull-left w-xs"></label>
            <div class="col-md-2 col-xs-12"></div>
            <label class="control-label pull-left w-xs"></label>
            <div class="col-md-2 col-xs-12">
                <button ng-click="queryFunc()" class="btn btn-sm btn-default btn-addon" ng-class="{'disabled':querying}" ng-disabled="querying">
                    <i class="fa fa-search" ng-show="!querying"></i>
                    <i class="fa fa-spinner no-bordr" ng-show="querying" ng-class="{'fa-spin':querying}"></i>
                    <span ng-show="!querying">查询</span>
                    <span ng-show="querying">查询中...</span>
                </button>
            </div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="workExcelTables">
            <div class="panel-body col-md-4 workExcelTable" ng-repeat="item in workExcelList">
                <table class="table table-bordered workExcelTa">
                    <tr>
                        <th class="tableHeader">{{item.name}}</th>
                        <th>
                            <button ng-click="showModal(item)" data-toggle="modal" data-target="#excelInfo" class="btn btn-default">查看</button>&nbsp;&nbsp;&nbsp;&nbsp;
                            <button class="btn btn-success btn-addon" ng-click="exportWork(item)"><i class="fa fa-download"></i>导出</button>
                            <!-- <button  class="pull-right-xs btn m-b-xs btn-sm btn-success btn-addon" ng-click="exportWork(item)"><i class="fa fa-download">导出</i></button> -->
                        </th>
                    </tr>
                    <tr ng-if="item.name!='提现表'">
                        <td>发货起始时间</td>
                        <td>
                            <input id="plannedArrivalTime" name="plannedArrivalTime" datetimepicker plugintype="datetime" ng-model="item.startTime" placeholder="预计发货时间"
                                class="form-control" type="text" required /> 
                        </td>
                    </tr>
                    <tr ng-if="item.name!='提现表'">
                        <td>发货结束时间</td>
                        <td>
                            <input name="plannedArrivalTime" datetimepicker plugintype="datetime" ng-model="item.endTime" placeholder="预计发货时间"
                                class="form-control" type="text" required />
                        </td>
                    </tr>

                    <tr ng-if="item.name=='提现表'">
                        <td>付款起始时间</td>
                        <td>
                            <input id="plannedArrivalTimeTX" name="plannedArrivalTimeTX" datetimepicker plugintype="datetime" ng-model="item.startTime" placeholder="预计发货时间"
                                class="form-control" type="text" required /> 
                        </td>
                    </tr>
                    <tr ng-if="item.name=='提现表'">
                        <td>付款结束时间</td>
                        <td>
                            <input name="plannedArrivalTimeTX" datetimepicker plugintype="datetime" ng-model="item.endTime" placeholder="预计发货时间"
                                class="form-control" type="text" required />
                        </td>
                    </tr>

                </table>

            </div>

            <div class="panel-body col-md-12 pagination">
                    <ul class="pagination-sm m-t-none m-b pagination ng-isolate-scope ng-valid">
                        <li ng-class="prevPageDisabled()">
                            <a href ng-click="setPage(currentPage-1)"> « 上一页</a>
                        </li>
                        <li ng-repeat="n in pageNum" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                            <span class="curpoint">{{n+1}}</span>
                        </li>
                        <li ng-class="nextPageDisabled()">
                            <a href ng-click="setPage(currentPage+1)">下一页 »</a>
                        </li>
                    </ul>
            </div>
        </div>

    </div>

    <!-- Modal -->
    <div class="modal fade bs-example-modal-lg" id="excelInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <!-- 当 data-backdrop="static" 时，点击灰色背景层是不会关闭的-->
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button id="clientInfo_model" type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">{{excelInfo.name}}</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-bordered">
                        <tr>
                            <th ng-repeat="td in excelInfo.tableHeaderList">{{td}}</th>
                        </tr>
                        <tr>
                            <!-- ng-Repeat不允许collection中存在两个相同Id的对象。为了规避这个错误，需要定义自己的track by表达式 
                                // 业务上自己生成唯一的id: item in items track by item.id
                                // 或者直接拿循环的索引变量$index来用:item in items track by $index -->
                            <th class="blankHeight" ng-repeat="td in excelInfo.tableBlankList track by $index"></th>
                        </tr>
                        <tr ng-if="excelInfo.hasSum">
                            <td ng-repeat="td in excelInfo.tableHeaderList">
                                <span ng-if="!$index">小计</span>
                            </td>
                        </tr>
                        <tr ng-if="excelInfo.hasTotalSum">
                            <td ng-repeat="td in excelInfo.tableHeaderList">
                                <span ng-if="!$index">合计</span>
                            </td>
                        </tr>
                        <tr ng-if="excelInfo.hasJuFengName">
                            <td ng-repeat="td in excelInfo.tableHeaderList">
                                <span ng-if="!$index">丹阳飓风物流股份有限公司</span>
                            </td>
                        </tr>



                    </table>



                </div>

            </div>
        </div>
    </div>
</div>